<template>
  <div>
<!--  <el-card class="middle_menu" :style="{'backgroundImage':userImg}">-->
<!--    <img :src="userImg" class="middle_menu_img" style="text-align: center"  />-->
<!--  </el-card >-->


    <div style="height: 200px;overflow: hidden;border-radius: 20px ;margin-bottom: 20px;position: relative;" class="title_img">
      <div style="z-index: 100;margin-left: 40px;margin-top: 50px;position: absolute;font-size: 50px;color: white;font-family: 'Microsoft YaHei UI Light'">
        <span>{{ noonTip+',' }}{{ this.userInfo.nickname }}</span>
        <p></p>
      </div>
    <el-image
        style=" width: 100%;transform: translateY(-50%);filter: grayscale(30%) blur(7px);display: block"
        :src="userImg"
        ></el-image>
    </div>
<!--    -->
          <div  v-show="this.articleList_status!==200">
            <el-row>
              <el-col :span="5" :offset="9">
                  <div class="loader" style="margin-left: 400px"></div>
              </el-col>
            </el-row>

          </div>

  <el-card  class="info_page"
            v-for="(item,index) in articleList"
            :key="item.id"
            v-if="item.is_delete==0">
    <el-row>
      <el-col :span="2">
        <img class="info_PageImg" :src="userImg" />
      </el-col>
      <el-col :span="10" >
        <span style="font-size: 10px">{{userInfo.nickname}}</span><br/>
        <span style="color: #c2bcbc;font-size: 5px">{{'发布于'+item.pub_date}}</span>
        <span style="color: #c2bcbc;font-size: 5px;margin-left: 10px">{{'来自'+userInfo.username}}</span>
      </el-col>
      <el-col :span="2" :offset="8" style="background:rgba(0, 0, 0, 0.1);border-radius: 20px;text-align: center">{{ item.title }}</el-col>

    </el-row>
    <el-row>
      <el-col>
        <p v-html="item.content"
           style="margin-top: 20px;font-family: 'Microsoft YaHei UI Light'">

          {{ item.content }}

        </p>
        <div class="articleImg">
          <img style="border-radius: 10px;margin-top: 20px;margin-bottom: 20px" :src="item.cover_img" onerror="this.style.display='none'" />
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-divider class="divider_bottom"></el-divider>
        <div class="contact_sty" >
          <el-link style="margin-left: 100px"
          @click="removeBlogArticle(item.id)">
          <span class="el-icon-delete-solid">删除</span>
          </el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link >
          <span class="el-icon-chat-dot-square">评论</span>
          </el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link style="margin-right: 100px">
          <span class="el-icon-edit-outline">编辑</span>
          </el-link>
        </div>
      </el-col>
    </el-row>
  </el-card>

  </div>
</template>

<script>

import axios from "axios";

export default {

  name: "Blog_articles",
  data(){
    return{
      noonTip:'',
      userInfo:'',
      id:'',
      articleList_status:'',
      itemList:'',
      userImg:'',
      articleList:[],

    }
  },methods:{
    removeBlogArticle(id){
      console.log(id)
      axios.delete('/my/article/delete/'+id).then(res=>{
      if(res.status!==200){
        this.$message.error('删除博客失败')
      }
        this.$router.go(0)
        this.$notify({
          title: '删除博客成功',
          type: 'success',
          offset: 800
        })
      })
    },
    async getUserInfo(){
      this.$get('/my/userinfo').then(res=>{
        this.userInfo=res.data
        this.userImg=res.data.user_pic
        this.id=res.data.id

      })
    },
    async getArticle(){
      this.$get('/my/article/get').then(res=>{
        this.articleList=res.data
        this.articleList_status=res.status
      })
    },
    myNoonTip(){
      const that = this
      const date = new Date()
      const hour = date.getHours();
      console.log("现在时间是:"+hour+"点!")
      if (hour >= 0 && hour < 12) {
        that.noonTip = '上午好'
      }
      else if(hour===12){
        that.noonTip = '中午好'
      }
      else if(hour  > 12 && hour < 18) {
        that.noonTip = '下午好'
      } else {
        that.noonTip = '晚上好'
      }
    }
  },
  created() {
    this.getUserInfo()
    this.getArticle()
    this.myNoonTip()
  }
}
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  border: 0;

}
#app{
  background: #bbbbbb;
  overflow: hidden;
}
.title_img{
  opacity: 0;
  animation: bottomBtn 1s linear 100ms forwards;
}

@keyframes bottomBtn {
  to {
    opacity: 1;
  }
  from {
    opacity: 0;
  }
}
//.el-carousel {
//  position: absolute;
//  height: 100%;
//  left: 0;
//  right: 0;
//  top: 0;
//  bottom: 0;
//  z-index: -1;
//
//}

.el-header {
  background: rgba(0, 0, 0, 0.2);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  line-height: 60px;
  box-shadow: 0px 0.5px 7px rgb(0, 0, 0, .2);
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
  transition-property: all;
  z-index: 1;
  border-radius: 30px;
  margin: 10px 10px;
  padding: 0px 20px;

}
.el-header:hover {
  margin: 10px 8px;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0.5px 20px rgb(0, 0, 0, .25);


}

.blog_img > img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-top: 20px;
  transform: translateX(5px);
}
.el-card{
  border: none;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0px 0.5px 7px rgb(0, 0, 0, .1) !important;
  margin-bottom: 20px;
}

.el-card:hover {
  background-color: rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0px 0.5px 20px rgb(0, 0, 0, .2) !important;
  transform: translateY(-6px);

}
.left_menu{

}
.middle_menu{

}
.right_menu{
  margin-top: 80px;text-align: center;
}
.info_page{
animation:one-in 1s forwards ;
  opacity: 0;
}
@keyframes one-in {
  from {
    padding-top: 100px;
    height: 0%;
    opacity: 0;
  }
  to {
    padding-top: 0px;
    height: 100%;
    opacity: 1;
  }
}
.userImg{
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out;
  border: 10px solid rgba(0,0,0,0.1);
  transform: translate(-50%,-70%);
}
.userNick{
  margin-top: 50px;
  font-family: "Microsoft YaHei UI Light";

  font-size: 15px;
}
.userImg:hover{
  border: 10px solid rgba(0,0,0,0.3);
}
.info_PageImg{

  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.articleImg{
  width: 500px;
}
.articleImg>img{
  height: 100%;
  width: 100%;
}
.el-main {
  height: 100vh;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #eee;
  border-radius: 3px;
}
.el-menu{
  border-right: 0;

}
.el-menu-item.is-active {
  color: white ;

}

.el-divider{
  background-color:gray;
}
.contact_sty{
  justify-content:space-between;
  display: flex;
}
.el-link{
  color: white !important;
}
.middle_menu{
  height: 200px;
  overflow: hidden;

}
/deep/middle_menu_img{
  height: 100%;
  margin-left: 0;
  width: 100%;
  opacity: 0.5;
}

.loader {
  width: 5em;
  height: 13em;
  font-size: 10px;
  display: flex;
  flex-direction: column;
}

/* ball */
.loader::before {
  content: '';
  width: 5em;
  height: 5em;
  background-color: orangered;
  border-radius: 50%;
  animation: ball-jumping 1s ease-in-out infinite;
}

@keyframes ball-jumping {
  20%, 80% {
    transform: translateY(-2em);
  }

  50% {
    transform: translateY(calc((8em - 5em) / 2));
  }
}

/* rectangle */
.loader::after {
  content: '';
  width: 5em;
  height: 8em;
  background-color: orange;
  border-radius: 0.5em;
  animation: rect-rotating 1s ease-in-out infinite;
}

@keyframes rect-rotating {
  50% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

.divider_bottom{
  margin-bottom: 20px;
}
</style>
